<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 14:58:43
 * @LastEditTime : 2021-09-07 11:37:54
 * @FilePath     : /newhope/src/page/home/gameDescription.vue
 * @Description  : 
-->

<script lang="ts" setup>
import Mask from '/@/components/mask/index.vue'
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useQuery } from "/@/hooks/query";
import { useHttp } from "/@/hooks/http";
import { State } from "/@/store/user";
const [send] = useHttp();

import readme from "/@/assets/images/readme.png";
import { useStore } from "vuex";
const store = useStore();
const toGame = ref(false);
const bottomText = ref("点击任意处即可返回");
const router = useRouter();
const [query] = useQuery();
onMounted(async () => {
  store.commit("user/editPopUpRule", true);
  if (query.goGame) {
    bottomText.value = "点击任意处以开始游戏";
  } else {
    bottomText.value = "点击任意处即可返回";
  }
});
function back() {
  if (query.goGame) {
    router.replace({ name: "gameIndex", query: { message: 2 } });
    return;
  }
  router.replace({ name: "index" });
}
</script>
<template>
  <div class="gameDescription" @click="back">
    <div class="readme">
      <img alt="readme" :src="readme" />
    </div>
    <Mask :style="'z-index:101'" />
    <span class="back">{{ bottomText }}</span>
  </div>
</template>

<style lang="scss" scoped>
.gameDescription {
  position: relative;
  height: 100%;
  width: 100%;
  background: url("../../assets/images/gameDescriptionBkg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .back {
    position: absolute;
    left: 50%;
    top: 570px;
    transform: translateX(-50%);
    color: #bd010c;
    font-weight: bold;
    z-index: 110;
  }
  .readme {
    position: absolute;
    top: 116px;
    left: 50%;
    transform: translateX(-52%);
    height: 422px;
    width: 300px;
    z-index: 110;
    img {
      height: 100%;
    }
    .readmeBox {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
